import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
export default () => {
  const ref = useRef();
  const [jeoJson, setGeoJson] = useState(null); //地图geo数据
  const [chart, setChart] = useState(null); // 地图图表实例
  const [series, setSeries] = useState([]); // 数据项配置，需要定时变化
  /*======== 地图配置项 ======== */
  const mapOption = useMemo(() => {
    let option = {
      tooltip: {
        trigger: "item",
      },
      visualMap: [{
        type: "continuous",
        min: 0,
        max: 500,
        left: "left",
        top: "bottom",
        text: ["高", "低"],
        inRange: {
          color: ["#e0ffff", "#006edd"],
        },
        show: false,
        seriesIndex: 0,
      }],
      geo3D: {
        zlevel: 16,
        map: "china",
        roam: false,
        instancing: true,
        // boxHeight: 30,
        // groundPlane: {
        //   show: true,
        //   color: "#ddd",
        // },
        // shading: "realistic",
        // shading: "color",
        label: {
          show: false,
          distance: 50,
          textStyle: {
            color: "#ff0",
            fontSize: 12,
          },
        },
        emphasis: {
          label: {
            show: false,
            textStyle: {
              fontSize: 16,
              color: "#ff0000",
            },
          },
        },
        itemStyle: {
          color: "auto",
          opacity: 1,
          borderWidth: 0.6,
          borderColor: "#ccc",
        },

        shading: "lambert",
        light: { //光照阴影
          main: {
            color: "#fff", //光照颜色
            intensity: 1.2, //光照强度
            //shadowQuality: 'high', //阴影亮度
            shadow: false, //是否显示阴影
            alpha: 55,
            beta: 10,

          },
          ambient: {
            intensity: 0.3,
          },
        },
      },
      series,
    };
    return option;
  }, [series]);


  /* 获取地图GeoJson、注册地图和生成图表实例 */
  const getGeoJson = () => {
    axios.get("https://clcdn.253.com/owg/file/100000_full.json").then((res) => {
      echarts.registerMap("china", res.data); //注册地图
      let chartInstance = echarts.init(ref.current);
      chartInstance && setChart(chartInstance);
      setGeoJson(res.data);
    });
  };
  useEffect(() => {
    getGeoJson();
  }, []);

  /* ======== 根据jeojson配置series ======= */
  const getSeries = useCallback(
    () => {
      if (!jeoJson) return;
      //--各省市数据
      let dataList = jeoJson.features.map((e, index) => {
        return {
          name: e.properties.name,
          value: Math.round(Math.random() * 500),

        };
      });
      console.log("dataList", dataList);
      // console.log("中国各省数据", dataList);
      //--点数据
      let coord = jeoJson.features.map((e, index) => {
        return {
          name: e.properties.name,
          value: e.properties.center,
        };
      });
      // console.log("各省中心点数据", coord);
      //--线数据
      let lines_coord = [];
      coord.forEach((e, index) => {
        index > 0 && e.value && lines_coord.push({ coords: [e.value, coord[0].value] });
      });

      // console.log("飞线数据", lines_coord);
      // 生成series配置项
      let seri = [
        {
          name: "北京东奥",
          type: "map3D",
          map: "china",
          coordinateSystem: "geo3D",
          roam: true,

          geo3DIndex: 0,
          data: dataList, //数据
          tooltip: {
            trigger: "item",
            formatter: "北京冬奥会<br/> {b}:{c} 人",
          },
        },
        {
          type: "scatter3D",
          coordinateSystem: "geo3D",
          zlevel: 15,
          symbolSize: 8,
          animation: true,
          animationDurationUpdate: 500,
          animationEasingUpdate: "cubicOut",
          rippleEffect: {
            period: 4, brushType: "stroke", scale: 4,
          },
          itemStyle: {
            color: "#FFB800",
            opacity: 1,
          },
          data: coord.slice(1),
        },
        {
          type: "scatter3D",
          coordinateSystem: "geo3D",
          zlevel: 15,
          symbolSize: 12,
          rippleEffect: {
            period: 6, brushType: "stroke", scale: 8,
          },
          itemStyle: {
            color: "#FF5722",
            opacity: 1,
          },
          data: coord.slice(0, 1),
        },
        {
          type: "lines3D",
          coordinateSystem: "geo3D",
          geo3DIndex: 0,
          zlevel: 15,
          tooltip: {
            show: false,
          },

          effect: {
            show: true,
            period: 3,
            trailLength: 0.1,
            symbol: "arrow",
            color: "#01AAED",
            symbolSize: 8,
            trailWidth: 3,
            trailColor: "#ff0000",
          },
          lineStyle: {
            width: 1.6, opacity: 0.8, curveness: 0.8, color: "#FFB800",
          },
          data: lines_coord,
        },

      ];

      setSeries(seri);
    },
    [jeoJson],
  );

  /* ======= 定时修改series配置项======= */
  useEffect(() => {
    let timer = null;
    getSeries();
    timer = setInterval(() => {
      getSeries();
    }, 3000);


    return () => {
      clearInterval(timer);
    };
  }, [getSeries]);

  useEffect(() => {
    // console.log(111);
    if (chart) {
      // console.log(22);
      chart.setOption(mapOption);
    }
  }, [mapOption, chart]);
  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}></div>
  );
};
